<template>
	<div class="details">
		<div class="netteach-crumbs">
			<router-link to="/netteach">网络教研</router-link>
			<!-- <span @click="goBack"><i>></i>{{content.name}} </span> -->
			<span><i>></i><router-link to="/netteach">{{content.name}}</router-link></span>
			<span><i>></i>查看</span>
		</div>
			
		<div class="details-theme-cont">

			<div class="details-number" v-if="content.total_average_score == 0">
				<span>--</span>
				<i class="ipng pingke01"></i>
				<strong>提示：分数将在活动结束后公布</strong>
			</div>

			<div class="details-number2" v-else>
				<span>{{content.total_average_score}}</span>
				<i class="ipng pingke02"></i>
			</div>


			<h3 class="details-theme">{{content.name}}</h3>
			<div class="details-see-info">
				<em>{{content._status}}</em>

				<el-tooltip class="item" effect="dark" content="浏览数人数" placement="top">
					<span><i class="ipng see01"></i>{{content.clicks}}</span>
				</el-tooltip>

				<el-tooltip class="item" effect="dark" content="评论数人数" placement="top">
					<span><i class="ipng write01"></i>{{content.comment_count}}</span>
				</el-tooltip>
				
				
			</div>
			<div class="details-initiator">
				<span>发起者：{{content.user_name}}</span>
				<!-- <span>ITC小学-一年级-语文老师</span>
				<span>所属学段：高中一年级</span> -->
			</div>
			<div class="details-time">
				<span>发起时间：{{content.create_time}}</span>
			</div>
			<div class="details-hr"></div>


			<div class="details-range">
				<h3>参与范围</h3>
				<div class="details-users">
					<span>参与用户：</span>
					
					<div class="users-name">
						<template>
							<span v-for="(user, index) of content.users" :key="index">{{user.name}}</span>
						</template>
						
					</div>
				</div>
			</div>

			<div class="details-activity-info">
				<h3>活动信息</h3>
				<div class="details-users">
					<span>活动时间：</span>
					<div>
						<span>{{content.create_time}} 至 {{content.end_time}}</span>
					</div>
				</div>
				<div class="details-users">
					<span>评估标准：</span>
					<div>
						
						<el-tooltip class="item" effect="dark" content="点击查看活动要求" placement="top">
							<span class="details-see" @click="getScore(content.standard_id)">{{content.standard_name}}</span>
						</el-tooltip>
					</div>
				</div>	
				<div class="details-users">
					<span>活动要求：</span>
					<div>
						<span>{{content.profile}}</span>
					</div>
				</div>	
				<div class="details-users">
					<span>算分方式：</span>
					<div>
						<span v-if="content.score_type == 0">全部相加平均数</span>
						<span v-if="content.score_type == 1">去首尾平均数</span>
					</div>
				</div>	
				<div class="details-users">
					<span>公开范围：</span>
					<div>
						<span>{{content.public_flag_str}}</span>
					</div>
				</div>	
			</div>
		</div>

		<div class="details-video">
			<h3>评课视频</h3>

			<template>
				<ul>
					<li class="i-groupLs box" v-for="(video, index) in videoList" :key="index">
						<div class="i-groupLs-img">
							<a @click="videoClick(video)" v-if="authority.includes($g.user_id)"><img :src="BASE_URL + video.picture" /></a>

							<a @click="changeAuthority" v-else><img :src="BASE_URL + video.picture" /></a>
						</div>

						<div class="i-groupLs-if">
							<a @click="videoClick(video)"  v-if="authority.includes($g.user_id)">{{video.video_name}}</a>
							<a @click="changeAuthority" v-else>{{video.video_name}}</a>
							<div class="i-groupLs-info clear">
								<a >
									<img class="acatar-img" :src="BASE_URL + video.avatar_path">
									<span>{{video.user_name}}</span>
								</a>
								<div class="fr">
									<i class="ipng playi"></i>
									<strong>{{video.clicks}}</strong>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</template>
			<div class="dependent" v-if="videoList.length === 0">
				<i class="ipng image_state01"></i>
				<p>还没发现任何相关的内容哦~</p>
			</div>
		</div>

		<!-- 查看评分标准 -->

		<el-dialog
		  title="查看评分标准"
		  :visible.sync="substandard"
		  width="800px" :close-on-click-modal="false">
			<div class="substandard-title">
				<span>撰写人: {{substandardList.user_name}}</span>
				<span>分数: {{substandardList.total_score}}</span>
			</div>
			<template>
				<table class="standard-item">
					<tr>
						<th>项目</th>
						<th>评价内容</th>
						<th>分数</th>
					</tr>
					<template v-for="(item, index) of substandardList.standard_item">
						<template v-if="item.child.length === 0">
							<tr>
								<td>{{item.name}}</td>
								<td>--</td>
								<td>{{item.score}}</td>
							</tr>
						</template>
						<template v-else>
							<tr v-for="(child, index2) of item.child">
								<td :rowspan="item.child.length" v-if="index2 === 0">{{item.name}}</td>
								<td >{{child.name}}</td>
								<td>{{child.score}}</td>
							</tr>
						</template>
						
					</template>
				</table>

			</template>
		</el-dialog>


	</div>
</template>

<script>
	
	export default{
		data(){
			return{
				substandard: false,
				content: '',
				substandardList: {},
				videoList: [],
				placeholder: false,
				authority: [],
			}
		},
		created(){
			this.addclick()
			this.getSubstandard()
			this.getDetailsVideo()
		},
		methods: {
			videoClick(obj){

				let  ext = obj.path.split('.').pop().toLocaleLowerCase();
				if (ext != 'mp4' && ext != 'mov') {
				    return this.$message.warning('该视频正在转码中，请在转码成功后点击播放，您可在后台查看视频转码进度。')
				}
			    let success = (res)=>{
			    	this.$router.push({path: '/netteach/video',query: {id: this.$route.query.id, vid: obj.id}})
			        this.getDetailsVideo()
			    }
			    let data = {video_id: obj.id};
			    this.$ajax.post("/api/video/video_click", data, {func: {success: success}})
			},
			addclick(){
				let success = (res=>{

				});

				let params = {
					id: this.$route.query.id
				}
				this.$ajax.post('api/network/add_eva_clicks',params, {func: {success: success}})
			},
			changeAuthority(){
				return this.$message.error('未收到邀请')
			},

			/*
				请求获取评课的视频列表
			*/
			getDetailsVideo(){
				let success = (res=>{
					
					this.videoList = res.data 
					if (res.data.data) {
						this.videoList = res.data.data 
					}
				});

				this.$ajax({
					url: 'api/network/eva_video',
					method: 'get',
					params: {
						eva_id: this.$route.query.id,
						userid: this.$g.user_id,
						page_index: 1,
						page_size: 0
					},
					func: {success: success}
				})
			},
			goBack(){
				this.$router.back(-1)
			},
			/*
				获取数据详情
			 */
			getSubstandard(){
				let success = (res =>{
					this.content = res.data;

					if (res.data.users.length != 0) {
						res.data.users.forEach(item =>{

							this.authority.push(item.id)
						})
					}
				});

				let fail = (res=>{
					this.$router.push('/netteach')
					this.$message.error(res.msg)
				})

				this.$ajax({
					url: 'api/network/eva_detail',
					method: 'get',
					params: {
						id: this.$route.query.id,
						userid: this.$g.user_id
					},
					func: {success: success, fail: fail}
				})
			},
			/*
				获取评分标准
			 */
			getScore(id){
				this.substandard = true
				let success = (res =>{
					this.substandardList = res.data
				});

				this.$ajax({
					url: 'api/network/standard_detail',
					method: 'get',
					params: {id: id},
					func: {success: success}
				})
			},
			
		}
	}
</script>
<style lang="scss">
.details-users{
    div{
        width: 80px;
        word-wrap:break-word; 
        word-break:normal; 
    }
}
</style>